<template>
  <!-- 图文列表 -->
  <div class="material">
    <div class="waterfall" v-loading="tableLoading">
      <!-- {{ type }} -->
      <!-- {{ info.item }} -->
      <template v-if="type == 'image'">
        <!-- <template> -->
        <div
          class="waterfall-item"
          v-for="item in info.item"
          :key="item.media_id"
        >
          <el-image
            class="material-img"
            :src="item.url"
            :preview-src-list="[item.url]"
          />
          <p class="item-name">{{ item.name }}</p>
          <el-row class="ope-row">
            <el-button
              size="small"
              style="margin: 0 auto"
              type="success"
              @click="selectMaterial(item)"
              >选择
              <el-icon><Select /></el-icon>
              <!-- <i class=" el-icon--right"></i> -->
            </el-button>
          </el-row>
        </div>
        <!-- </template> -->
      </template>

      <template v-if="type == 'news'">
        <div
          class="waterfall-item"
          v-for="news in info.item"
          :key="news.media_id"
        >
          <template v-if="news.content && news.content.news_item">
            <wxNews
              chooice
              @selectNewsMaterial="
                (item) => {
                  selectMaterial(item, news.media_id);
                }
              "
              :objData="news.content.news_item"
            ></wxNews>
            <h6></h6>
            <!-- <el-row class="ope-row d_f ju_c">
              <el-button
                size="small"
                type="success"
                @click="selectMaterial(item)"
                >选择<i class="el-icon-circle-check el-icon--right"></i
              ></el-button>
            </el-row> -->
          </template>
        </div>
      </template>
    </div>
    <span class="dialog-footer">
      <pagination
        v-show="info.total_count > 0"
        :total="info.total_count || 0"
        v-model:page="searchInfo.page"
        v-model:limit="searchInfo.pageSize"
        :pageSizes="[10, 20]"
        @pagination="getInfo"
      />
    </span>
    <div v-if="info.item && info.item.length == 0" class="d_f ju_c">
      <el-empty :image-size="200"></el-empty>
    </div>
  </div>
</template>

<script>
import { getMaterialList } from "@/api/mpManage/mpMaterial";
import wxNews from "@/cpns/wx-news";
export default {
  name: "material",
  components: { wxNews },
  props: {
    type: {
      type: String,
      default: "image",
    },
  },
  data() {
    return {
      tableLoading: true,
      searchInfo: {
        type: "",
        page: 1,
        pageSize: 10,
      },
      info: {
        item: [],
      },
    };
  },
  created() {
    // this.init();
  },
  computed: {
    getType() {
      return this.type;
    },
  },
  watch: {
    type: {
      handler() {
        console.log("change type");
        if (this.type !== "text") {
          // 文本类型没有物料
          this.init();
        }
      },
      immediate: true,
    },
  },
  methods: {
    init() {
      this.getInfo();
    },
    async getInfo() {
      this.tableLoading = true;
      this.searchInfo.type = this.getType;
      const params = { ...this.searchInfo };
      const { data } = await getMaterialList(params);
      console.log("物料数据", data);
      this.info = data;
      this.tableLoading = false;
    },
    selectMaterial(item, article_id) {
      item.article_id = article_id;
      this.$emit("onItem", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.waterfall {
  width: 100%;
  column-gap: 10px;
  column-count: 5;
  margin: 0 auto;
  text-align: center;
}
.waterfall-item {
  padding: 10px;
  margin-bottom: 10px;
  break-inside: avoid;
  border: 1px solid #eaeaea;
  text-align: center;
}
.material-img {
  width: 100%;
}
p {
  line-height: 30px;
}
@media (min-width: 992px) and (max-width: 1300px) {
  .waterfall {
    column-count: 3;
  }
  p {
    color: red;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .waterfall {
    column-count: 2;
  }
  p {
    color: orange;
  }
}
@media (max-width: 767px) {
  .waterfall {
    column-count: 1;
  }
}
</style>
